<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <script type="application/javascript" src="../js/vue.js"></script>

    <style>
        * {
            margin-top: 20px;
        }

        .base {
            width: 100px;
            height: 100px;
            background-color: darkseagreen;
        }

        .click {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .click2 {
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
    </style>
</head>
<body>

<div id="app11">
    <!-- 绑定class样式:字符串写法,适用于:样式类名不确定,需要动态指定-->
    <div class="base" :class="changeBc" @click="changeColor">{{name}}</div>

    <!-- 绑定class样式:数组写法,适用于:绑定的样式个数不确定,名字也不确定-->
    <div class="base" :class="classArr">{{name}}</div>

    <!-- 绑定class样式:对象写法,适用于:绑定的样式个数不确定,名字也确定,但需要动态决定-->
    <div class="base" :class="classObj">{{name}}</div>

    <!-- 绑定style样式:对象写法,适用于:样式需要动态指定-->
    <div class="base" :style="styleObj">{{name}}</div>

    <!-- 绑定style样式:数组写法-->
    <div class="base" :style="styleArr">{{name}}</div>
</div>

<script type="application/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: "#app11",
        // 变量数据
        data: {
            name: '你好',
            changeBc: '',
            classArr: ['click', 'click2'],
            classObj: {
                click: true,
                click2: false
            },
            styleObj: {
                fontSize: '40px',
                color: 'green'
            },
            styleArr: [
                {
                    fontSize: '50px',
                    color: 'green'
                },
                {
                    width: '200px',
                    backgroundColor:'yellow'
                }
            ]
        },
        // 方法
        methods: {
            changeColor() {
                //this.changeBc = 'click'
                //随机使用
                const arr = ['click', 'click1']
                const index = Math.floor(Math.random() * 3)
                console.log(index)
                this.changeBc = arr[index]
            }
        },
        // 计算属性
        computed: {},
        // 监听属性
        watch: {},
    })
</script>
</body>
</html>
